<template>
    <div>
        <div :class="className" :ref="id" :style="{height:height,width:width}"/>
    </div>
</template>

<script>
import echarts from 'echarts'
import resize from '@/mixins/chartResize'
import { mapGetters, mapActions } from 'vuex'
export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        },
        options: {
            type: Object,
            require: true
        },
        data: {
            type: Object
        }
    },
    computed: {
		...mapGetters(['echartColors']),
	},
    data() {
        return {
            chart: null
        }
    },
    watch: {
        options: {
            handler(newOptions,oldOptions) {
                this.chart.setOption(newOptions)
            },
            deep: true
        },
        
        echartColors: {
            handler(newColors,oldColors) {
                switch(this.data.type){  
                    case 'BarEchart' : 
                        this.data.options.series.map((item,i)=>{
                            item.itemStyle.color = newColors[i]
                        })
                        break;  
                    case 'LineEchart' : 
                        this.data.options.series.map((item,i)=>{
                            item.color = newColors[i]
                            item.areaStyle.normal.color = newColors[i]
                        })
                        break;  
                    case 'LineBarEchart' : 
                        this.data.options.series.map((item,i)=>{
                            item.itemStyle.color = newColors[i]
                        })
                        break; 
                    case 'PieEchart' : 
                        this.data.options.series[0].color = newColors
                        break;  
                    case 'KuaiPieEchart' : 
                        this.data.options.series.map((item,i)=>{
                            item.data.map((child,c)=>{
                                if(c%2==0){
                                    child.itemStyle.normal.color = newColors[c]
                                    child.itemStyle.normal.borderColor = newColors[c]
                                } else {
                                    child.itemStyle.normal.label.show = false
                                }
                            })
                        })
                        break;
                    case 'GaugeEchart' : 
                        this.data.options.series.map((item,i)=>{
                            item.axisLine.lineStyle.color[0][1] = newColors[i]
                        })
                        break;
                    case 'SunburstEchart' : 
                        break;
                    default : 
                        this.data.options.color = newColors
                        break;  
                }  
            },
            deep: true
        },
    },
    mounted() {
        this.$nextTick(function () {
            this.initChart()
        });
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            const _this = this
            const Echart = this.$refs[this.id]
            _this.chart = echarts.init(Echart)
            _this.setOptions()
        },
        setOptions() {
            this.chart.setOption(this.options)
        }
    }
}
</script>
